<template>
  <div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}">
    <PcHeader/>
    <el-container>
      <el-aside style="width: 200px;margin-top: 43px;margin-left: 344px;height: 425px">
        <div class="text item">
          <a @click="goPage(1)" class="myA" :class="isSelected(1)">我的信息</a>
        </div>
        <div class="text item">
          <a @click="goPage(2)" class="myA" :class="isSelected(2)">帮扶圈子</a>
        </div>
        <div class="text item">
          <a @click="goPage(3)" class="myA" :class="isSelected(3)">我的帮扶</a>
        </div>
      </el-aside>
      <!--  主页面  -->
      <el-main>
        <div style="margin-top: 20px;margin-bottom: 10px;">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item>个人中心</el-breadcrumb-item>
            <el-breadcrumb-item>{{ titleName }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>


</template>

<script>
import {mapState} from "vuex";
import variables from "@/assets/styles/variables.scss";
import PcHeader from '@/components/myComponents/components/header/index'

export default {
  name: "PcUserInfo",
  components: {PcHeader},
  data() {
    return {
      titleName: '我的信息',
      titleType: 1,
    }
  },
  created() {
    this.goPageFirst(this.$cache.session.get('titleType'))
  },
  methods: {
    goPage(type) {
      if (this.titleType == type) {
        return;
      }
      // session 普通值
      this.$cache.session.set('titleType', type)
      this.goPageFirst(type)
    },
    goPageFirst(type) {
      if (type == 1) {
        this.$router.push({path: '/pc/user/profile'}).catch(err => err)
        this.titleName = "我的信息";
        this.titleType = 1;
      } else if (type == 2) {
        this.$router.push({path: '/pc/user/profile/topic'}).catch(err => err)
        this.titleName = "帮扶圈子";
        this.titleType = 2;
      } else if (type == 3) {
        this.$router.push({path: '/pc/user/profile/help'}).catch(err => err)
        this.titleName = "我的帮扶";
        this.titleType = 3;
      }
    },
    isSelected(value) {
      if (this.titleType == value) {
        return "selected";
      } else {
        return ""
      }
    },
  },
  computed: {
    ...mapState({
      theme: state => state.settings.theme,
      sideTheme: state => state.settings.sideTheme,
      sidebar: state => state.app.sidebar,
      device: state => state.app.device,
      needTagsView: state => state.settings.tagsView,
      fixedHeader: state => state.settings.fixedHeader
    }),
    classObj() {
      return {
        hideSidebar: !this.sidebar.opened,
        openSidebar: this.sidebar.opened,
        withoutAnimation: this.sidebar.withoutAnimation,
        mobile: this.device === 'mobile'
      }
    },
    variables() {
      return variables
    }
  }
}

</script>
<style scoped>
.text {
  font-size: 14px;
}

.item {
  margin-top: 10px;
  margin-bottom: 10px;
}

.myA {
  color: black
}

.selected {
  color: #00afff;
}

</style>
